
<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>学科名称</span><el-input
        v-model="input"
        class="input"
        size="medium"
      ></el-input><el-button size="medium" @click="clearSubject">清除</el-button><el-button size="medium" type="primary" @click="searchSubject">搜索</el-button>
      <el-button
        class="btn"
        style="float: right; padding: 3px 0"
        type="success"
        icon="el-icon-edit"
        @click="dialogVisible=true"
      >新增学科</el-button>
      <el-dialog

        title="新增学科"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <span slot="footer" class="dialog-footer">

          <el-form ref="formRef" class="dis" :model="form" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="学科名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入学科名称" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item class="dbh">

              <span style="margin-right:10px">是否显示</span>
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">确认</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-form-item>
          </el-form>

        </span>
      </el-dialog>

      <el-alert
        :closable="false"
        type="info"
        show-icon
      >
        <span class="fzz">数据一共{{ num }}条</span>

      </el-alert>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="index"
        label="序号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="学科名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
      >
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期"
      >
      </el-table-column>
      <el-table-column
        prop="isFrontDisplay"
        label="前台是否显示"
      >
      </el-table-column>
      <el-table-column
        prop="twoLevelDirectory"
        label="二级目录"
      >
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签"
      >
      </el-table-column>
      <el-table-column
        prop="totals"
        label="题目数量"
      >
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        width="280"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="$router.push({path:'directorys',query:{id:scope.row.id,name:scope.row.subjectName}})">学科分类</el-button>
          <el-button type="text" size="small" @click="$router.push({path:'tags',query:{id:scope.row.id,name:scope.row.subjectName}})">学科标签</el-button>
          <el-button type="text" size="small" @click="changeSubjectFn(scope.row.id,scope.row.subjectName)">修改</el-button>
          <el-button type="text" size="small" @click="open(scope.row.id)">删除</el-button>
          <el-dialog

            title="修改学科"
            :visible.sync="dialogVisibleTow"
            width="30%"
            :append-to-body="true"
          >
            <span slot="footer" class="dialog-footer">

              <el-form ref="formRefTow" :model="nums" :rules="rulesTow" size="medium" label-width="100px">
                <el-form-item label="学科名称" prop="name">
                  <el-input ref="ipt" v-model="nums.name" placeholder="请输入学科名称" clearable :style="{width: '100%'}">1332331</el-input>
                </el-form-item>
                <el-form-item class="dbh">

                  <span style="margin-right:10px">是否显示</span>
                  <el-switch
                    v-model="value"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="primary" @click="submitFormTow">确认</el-button>
                  <el-button @click="resetFormTow">取消</el-button>
                </el-form-item>
              </el-form>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pls"
      :page-sizes="[5, 10, 20, 50]"
      layout=" prev, pager, next, sizes, jumper"
      :page-size="page.pageSize"
      :total="num"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { getSubject, addSubject, deleteSubject, changeSubject } from '../../api/subject/index.js'
// import subject from './compoent/subject.vue'
export default {
  // components: { subject },
  data() {
    return {

      nums: {
        name: undefined
      },
      rulesTow: {
        name: [{
          required: true,
          message: '请输入学科名称',
          trigger: 'blur'
        }]
      },

      value: true,
      form: {
        name: undefined

      },
      rules: {
        name: [{
          required: true,
          message: '请输入学科名称',
          trigger: 'blur'
        }]
      },
      input: '',
      num: 0,
      tableData: [],
      page: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      dialogVisible: false,
      dialogVisibleTow: false,
      sdada: { subjectName: '2222', isFrontDisplay: 1 },
      body: {
        subjectName: '2222',
        id: 21,
        isFrontDisplay: ''
      }
    }
  },
  created() {
    this.getSubject()
  },
  methods: {
    submitFormTow() {
      this.$refs.formRefTow.validate(valid => {
        if (!valid) return
        this.body.subjectName = this.nums.name
        changeSubject(this.body)
        this.$message({
          type: 'success',
          message: '提交成功!'
        })
        this.getSubject()
        this.dialogVisibleTow = false
      })
    },
    resetFormTow() {
      this.dialogVisibleTow = false
    },
    changeSubjectFn(id, subjectName) {
      this.dialogVisibleTow = true
      this.nums.name = subjectName
      this.body.id = id

      this.body.isFrontDisplay = this.value === true ? 1 : 0
      // this.body.id = id
      // this.body.subjectName = this.form.nameTow
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSubject(id)
        this.getSubject()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return
        // this.addSubjectFn()

        this.sdada.subjectName = this.form.name
        this.sdada.isFrontDisplay = this.value === true ? 1 : 0
        addSubject(this.sdada)
        this.getSubject()
        this.form.name = ''
        this.dialogVisible = false
        this.$message({
          message: '增加成功',
          type: 'success'
        })
      })
    },
    // async addSubjectFn () {
    //   const data = {
    //     subjectName: 2222, isFrontDisplay: 1, id: null
    //   }
    //   const res = await addSubject(data)
    //   this.tableData = res.data.items
    // },

    resetForm() {
      // this.$refs.formRef.resetFields()
      this.dialogVisible = false
    },
    clearSubject() {
      this.input = ''
    },
    searchSubject() {
      this.page.subjectName = this.input
      this.getSubject()
    },
    async getSubject() {
      const res = await getSubject(this.page)

      this.tableData = res.data.items
      this.tableData.forEach((item, index) => {
        item.isFrontDisplay === 1 ? item.isFrontDisplay = '是' : item.isFrontDisplay = '否'
        item.index = index + 1
      })
      this.num = res.data.counts
    },
    handleSizeChange(val) {
      this.page.pagesize = val
      this.getSubject()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getSubject()
    }
  }
}
</script>

<style scoped lang="scss">
.input {
  width: 200px;
  margin: 10px;
}

.fzz {
  font-size: 15px;
}

.btn {
  margin-top: 10px;
  // font-size: 12px;
  padding: 5px;
  width: 100px;
  height: 35px;
}
span {
  color: #606266;
  font-weight: 700;
}
.pls {
  float: right;
}
.dis{
  margin-top: -30px;
 margin-bottom: 40px;

}
.dbh{
 margin-left: -330px;
 margin-bottom: 40px;
}
</style>
